<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container justify-between">
            <div style="flex:1;">
                <el-tabs v-model="activeName" @tab-click="tabClick" style="width:100%;">
                    <el-tab-pane label="招聘进展分析" name="first">
                        <zhaopinPanel></zhaopinPanel>
                    </el-tab-pane>
                    <el-tab-pane label="渠道分析" name="second">
                        <qudaoPanel></qudaoPanel>
                    </el-tab-pane>
                    <el-tab-pane label="转化率分析" name="third">
                        <zhuanhuaPanel></zhuanhuaPanel>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import DateUtil from '@/utils/dateutil'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'
    import zhaopinPanel from './pane/zhaopin'
	import qudaoPanel from './pane/qudao'
	import zhuanhuaPanel from './pane/zhuanhua'

	export default {
		directives: {waves},
		data() {
			return {
				activeName: 'first',
			}
		},
		filters: {},
		components: {
			zhaopinPanel,qudaoPanel,zhuanhuaPanel
        },
		created() {

		},
		mounted() {
		},
		computed: {},
		methods: {
			tabClick(tab, event) {
				console.log(tab, event);
			},
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .panel-group {
        margin-top: 18px;
        .card-panel-col {
            margin-bottom: 32px;
        }
        .card-panel {
            height: 108px;
            cursor: pointer;
            font-size: 12px;
            position: relative;
            overflow: hidden;
            color: #666;
            background: #fff;
            box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
            border-color: rgba(0, 0, 0, .05);
            .card-panel-text {
                text-align: center;
            }
            &:hover {
                .card-panel-icon {
                    color: #fff;
                }
                .card-panel-text {
                    color: #fff;
                }

                .icon-people {
                    background: #40c9c6;
                }
                .icon-money {
                    background: #d4237a;
                }
                .icon-morder {
                    background: #f4516c;
                }
                .icon-agent {
                    background: #0b988f
                }
            }
            .icon-people {
                color: #40c9c6;
            }
            .icon-message {
                color: #36a3f7;
            }
            .icon-money {
                color: #d4237a;
            }
            .icon-morder {
                color: #f4516c;
            }
            .icon-agent {
                color: #0b988f;
            }
            .card-panel-icon-wrapper {
                float: left;
                margin: 8px 0 0 8px;
                padding: 16px;
                transition: all 0.38s ease-out;
                border-radius: 6px;
            }
            .card-panel-icon {
                float: left;
                font-size: 48px;
            }
            .card-panel-description {
                float: right;
                font-weight: bold;
                margin: 26px;
                margin-left: 0px;
                div {
                    line-height: 18px;
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 16px;
                }
                .border-bottom {
                    border-bottom: 1px dashed #aaa
                }
                .border-right {
                    border-right: 1px dashed #aaa
                }
                span {
                    display: inline-block;
                    line-height: 1.5;
                    width: 6em;
                    text-align: center;
                }
            }
        }
    }
</style>
